<!--
 * @Description: 查看渠道活码详情
 * @Author: lixianggang
 * @Date: 2022-11-04 15:22:32
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-11-08 20:16:18
-->
<template>
  <div class="detail-wrap" v-loading="pageLoading">
    <div class="header-btn">
      <div>详情</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <el-form :model="codeForm" label-width="120px" label-position="right">
      <div class="wrap g-card">
        <div class="title-header">基础设置</div>
        <div class="base-set ml20">
          <el-form-item label="活码名称" prop="codeName">
            {{ codeForm.activityName }}
          </el-form-item>
          <el-form-item label="被添加员工" prop="staff">
            <div>
              <span v-show="codeForm.ruleType === 1">全天在线</span>
              <span v-show="codeForm.ruleType === 2">自动上下线</span>
            </div>
          </el-form-item>
          <el-form-item label="">
            <el-table :data="tableData" v-loading="tableLoading" :row-style="{ height: '40px' }" class="label-width">
              <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
              <el-table-column prop="userName" label="员工" align="center"></el-table-column>
              <el-table-column prop="beginTime" label="自动上下线时间" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.beginTime }} - {{ scope.row.endTime }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="dateActivationNumber" label="每日添加客户上限" align="center"></el-table-column>
              <el-table-column prop="warningCount" label="每日添加客户不足预警" align="center"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="兜底员工" prop="bottomStaff">
            <div>
              <el-tag size="medium" v-for="(item) in bottomStaff" :key="item.userId" type="info">{{ item.userName }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="打标签" prop="label">
            <div>
              <tag-group v-model="codeForm.tagVOS" :disabled="true" />
            </div>
          </el-form-item>
          <el-form-item label="分组" prop="group">
            <div v-for="item in groupList" :key="item.id">
              <span v-if="item.id === codeForm.groupId">{{ item.name }}</span>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="wrap g-card">
        <div class="title-header">欢迎语设置</div>
        <div class="greet-set ml20">
          <el-form-item label="设置欢迎语" prop="timeRange">
            <div v-show="codeForm.greetSpeech === 0">渠道欢迎语</div>
            <div v-show="codeForm.greetSpeech === 1">不发送欢迎语</div>
          </el-form-item>
          <div class="greet-list" v-show="codeForm.greetSpeech == 0" v-for="(item, index) in codeForm.weMsgTlps" :key="index">
            <el-form-item label="">
              <div class="greet-form">
                <el-form-item label="时段：" prop="timeRange" style="padding: 0;">
                  <div>
                    {{ codeForm.weMsgTlps[index].startValidTime }} -
                    {{ codeForm.weMsgTlps[index].endValidTime }}
                  </div>
                </el-form-item>
                <el-form-item label="文本：" prop="welcomeMsg" style="padding: 0;">
                  <div class="input-button">
                    <div>{{ codeForm.weMsgTlps[index].welcomeMsg }}</div>
                  </div>
                </el-form-item>
                <el-form-item label="选择素材：" style="padding: 0;">
                  <NormalSelectMaterial v-if="operateFlag" :disabled="true" :selectedList="codeForm.weMsgTlps[index].mediaContentDetails"></NormalSelectMaterial>
                </el-form-item>
                <el-form-item label="二维码：" prop="qrCode" style="padding: 0;">
                  <div v-if="codeForm.weMsgTlps[index].codeState=='1'">
                    无二维码
                  </div>
                  <div v-else>
                    {{` ${['员工活码', '渠道活码', '群活码'][codeForm.weMsgTlps[index].qrType]} : ${codeForm.weMsgTlps[index].activityName}` }}
                  </div>
                </el-form-item>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { verbalDetail } from "@/api/operate/verbalTrick";
import { categoryList } from "@/api/article/group";

export default {
  data() {
    return {
      pageLoading: false,
      codeForm: {},
      tableData: [],
      groupList: [],
      bottomStaff: [],
      tableLoading: false,
      operateFlag: ''
    };
  },
  methods: {
    // 初始化
    init() {
      // 获取分组
      categoryList({
        levelType: 3,
        mediaType: 1,
      }).then((res) => {
        if (res.code === 200) {
          this.groupList = res.data;
        }
      });
      verbalDetail({ id: this.$route.query.id }).then((res) => {
        if (res.code === 200) {
          this.codeForm = { ...res.data };
          this.inputLabel = res.data.label;
          this.qrUserInfos = res.data.qrUserInfos;
          if (this.qrUserInfos.length) {
            this.qrUserInfos.forEach((item) => {
              if (item.weQrUserList.length) {
                item.weQrUserList.forEach((items) => {
                  if (items.type == 1) {
                    this.bottomStaff.push(items);
                  } else {
                    if (items.dateActivationNumber == "99999") {
                      items.dateActivationNumber = "不限";
                    }
                    this.tableData.push(items);
                  }
                });
              }
            });
            this.operateFlag = 'DETAIL'
          }
          this.addLabelConfirm();
          this.tableData.forEach((item) => {
            item.dateRange = [];
            if (item.beginTime && item.endTime) {
              item.dateRange.push(item.beginTime);
              item.dateRange.push(item.endTime);
            }
          });
          console.log("this.codeForm",this.codeForm);
          this.codeForm.weMsgTlps.forEach((item) => {
            item.timeRange = [];
            if (item.startValidTime && item.endValidTime) {
              item.timeRange.push(item.startValidTime);
              item.timeRange.push(item.endValidTime);
            }
          });
          // this.turnString();
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 打标签
    addLabelConfirm() {
      this.codeForm.label = this.inputLabel ? this.inputLabel.split("；") : [];
      // 判断是不是以;结尾
      if (this.inputLabel.endsWith("；")) {
        this.codeForm.label.pop();
      }
      this.addLabelVisible = false;
    },
    // 有无二维码
    qrCodeForm(val) {
      // 渠道活码
      if (val) {
        this.codeForm.weMsgTlps[this.radioIndex].codeUrl = val.qrCode || val.codeUrl;
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.detail-wrap {
  height: 100%;

  .header-btn {
    @include headerBtn;
    margin-bottom: 16px;
  }

  .wrap {
    @include titleWrap;
  }

  .base-set {
    padding-right: 10px;

    .sub-text {
      color: rgba(192, 192, 192, 1);
      font-size: 13px;
    }

    .limit-style {
      display: flex;
      justify-content: space-between;
    }
  }
}

.greet-set {
  width: 81.5%;

  .greet-form {
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(187, 187, 187, 0.57);
    padding: 15px;
    margin-bottom: 20px;
  }

  .input-button {
    display: flex;
    align-items: end;

    button {
      height: fit-content;
      margin-left: 10px;
    }
  }
}

.sub-title {
  color: rgba(192, 192, 192, 1);
  font-size: 13px;
  font-weight: 400;
  margin-left: 15px;
}

.label-text {
  color: rgba(189, 49, 36, 1);
  text-align: right;
}

.greet-list {
  position: relative;

  .right-close {
    position: absolute;
    right: 6px;
    top: 5px;
  }
}
</style>
